<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <title>Document</title>

</head>
<body>
    <div id="app">
       fdsaf{{message}}fdsaf
    </div>
    <script>
        // Object.defineProperty :1.定义一个对象  2.修改一个对象；
        // VUE
        // let obj = {
        //     name:"张三",
        //     age:20
        // }

    //   var vm =   new Vue({
    //         el:"#app",
    //         data:{
    //             message:"hello"
    //         }
    //     })
    //     setTimeout(() => {
    //     vm.message  = "你好";
    //     }, 2000);


    // 1.设置对象，定义一个对象

    // let obj2 = {
    //     name:"张三"
    // }
    // console.log(obj2)


    // let obj = Object.defineProperty({},"name",{
    //     configurable:true,   //默认是false
    //     enumerable:true,  //可枚举
    //     get(){
    //         console.log("get");
    //         return "张三";
    //     },
    //     set(newValue){
    //         console.log("set:",newValue);
    //     }
    // })


    // console.log(obj);
    // delete obj['name'];

    // console.log(obj);
    // console.log( obj.name);
    // obj.name = "李四"

    // for(let key in obj){
    //     console.log(key);
    // }



    // 渲染案例
    // 初次渲染
   
    // 获取id为app的div 元素
    let appEle = document.querySelector("#app");
    var childNodes = appEle.childNodes;  // 获取app元素底下的所有子节点
    // console.log(childNodes)
    var textContent = childNodes[0].textContent;  // 获取了 子节点底下的 文本节点
    var reg = /{{(\w+)}}/g;  // 匹配 {{}} 里的内容
    let key;
    if(reg.test(textContent)){
         key = RegExp.$1;  // 获取匹配到 {{}}里的值 -----》message
    }
    // 定义了一个数据； let data = {message:"hello"}
    let data = Object.defineProperty({},"message",{
        configurable:true,   //默认是false
        enumerable:true,  //可枚举
        get(){
            console.log("get");
            return "hello";
        },
        set(newValue){
            // 在2秒之后执行的；
            // 二次渲染；
            console.log("set:",newValue);  // newValue=====>你好
            let oldValue = data[key];  // data===>{message:"hello"} --->data['message']--->hello
            let reg = new RegExp(oldValue);  //  reg= /hello/;
            // childNodes[0].textContent就是fdsafhellofdsaf
            // var res=  “fdsafhellofdsaf”.replace(/hello/,"你好")； “fdsaf你好fdsaf”
            // “fdsaf你好fdsaf” 赋值给 childNodes[0].textContent
            childNodes[0].textContent = childNodes[0].textContent.replace(reg,newValue);
        }
    })

    // 获取文本节点  把文本节点里的 {{message}}的内容 替换成  data[key] --->data={message:"hello"} key-->message
    // data[key]=== data['message'] --->hello
    // textContet = "fdsaf{{message}}fdsaf"
    childNodes[0].textContent = textContent.replace(reg,data[key]);
    // 文本变成了 fdsaf{{message}}fdsaf ---->fdsafhellofdsaf

    // let data = {message:"hello"}  ---->data = {mesage:"你好",age:20,obj:{}}
   
    setTimeout(() => {
        data.message = "你好"; // 设置 data里的message值---->触发 set方法；
        console.log("修改了值");
    }, 2000);



    </script>
</body>
</html>